<template>
	<view class="store">
		<view class="Information">
			<view class="shopkeeper">
				<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" class="shop-image" mode=""></image>
				<view class="keeper">
					<view class="keeper-name">1</view>
					<view class="">在售商品 1件</view>
				</view>
			</view>
			<u-line type="info" />
			<view class="store-information">
				<view class="store-star-rating">
					<view class="">店铺星级:</view>
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
				<view class="store-ratings">
					<view class="">店铺评分:</view>
					<view class="divide">0分</view>
				</view>
				<view class="qualification-information">
					<view class="">资质信息</view>
					<u-icon name="arrow-right" size="22"></u-icon>
				</view>
			</view>
		</view>
		<view class="store-introduction">
			<view class="">资质简介:</view>
			<view class="brief-content">123</view>
		</view>
		<view class="contact-customer-service">
			<u-icon name="kefu-ermai" size="28"></u-icon>
			<view class="customer-service">联系客服</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 星星评分显示星星个数
				count: 5,
				// 星星评分默认显示0个星星
				value: 0
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.store {
		background-color: rgb(246, 246, 246);
		height: 1440rpx;
	}

	.Information {
		padding: 40rpx 0rpx 30rpx 40rpx;
		background-color: #fff;
	}

	.shopkeeper {
		display: flex;
		align-items: center;
		padding: 40rpx 0rpx 30rpx 0rpx;
		background-color: #fff;
	}

	.keeper {
		margin-left: 20rpx;
	}

	.keeper-name {
		font-size: 40rpx;
		font-weight: bold;
	}

	.shop-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}

	.store-information {
		color: rgb(157, 157, 157);
		font-size: 35rpx;
		padding: 30rpx 30rpx 20rpx 0rpx;
	}
	.store-star-rating{
		display: flex;
		justify-content: space-between;
		align-content: center;
		margin-bottom: 50rpx;
	}
	
	.store-ratings{
		display: flex;
		justify-content: space-between;
		align-content: center;
		margin-bottom: 50rpx;
	}
	
	.divide{
		color: rgb(255, 162, 0);
	}
	
	.qualification-information{
		display: flex;
		justify-content: space-between;
		align-content: center;
	}
	
	.store-introduction{
		margin-top: 20rpx;
		height: 300rpx;
		padding: 20rpx 0rpx 0rpx 40rpx;
		background-color: #fff;
		color: rgb(157, 157, 157);
		display: flex;
	}
	
	.brief-content{
		color: black;
		margin-left: 20rpx;
	}
	.contact-customer-service{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		margin-top: 20rpx;
		height: 100rpx;
	}
</style>